<div class="feed-item seed-underline">
  <div class="feed-header seed-flexbox seed-flexbox-align-center">
    <div class="avatar">
      <seed-avatar [userId]="feed.userId" [lazyLoadAvatar]="feed.iconUrl||feed.authorImageUrl||feed.userIcon"></seed-avatar>
    </div>
    <span class="nick" [routerLink]="['/', feed.userId]">{{feed.nickName?feed.nickName:feed.authorName| truncate:10}}</span>
  </div>
  <div class="feed-content" (click)="goToTargetPage(feed)">
    <p class="content-text">
      {{feed.title}}
    </p>
    <ul class="content-img seed-flexbox">
      <li *ngFor="let item of feed.feedContents | slice:0:3 "
          [class.full-width]="feed.feedContents.length===1"
          [class.half-width]="feed.feedContents.length===2">
        <seed-img [lazyLoadImg]="item.content" [background]="'true'" *ngIf="item.contentType===2"></seed-img>
        <seed-img [lazyLoadImg]="item?.thumbnail" [background]="'true'" [class.video]="item.contentType ===3"
                  *ngIf="item.contentType===3"></seed-img>
      </li>
      <li *ngFor="let item of feed.covers | slice:0:3 "
          [class.full-width]="feed.covers.length===1"
          [class.half-width]="feed.covers.length===2">
        <seed-img [lazyLoadImg]="item.url" [background]="'true'" [class.video]="item.contentType ===3"></seed-img>
      </li>
    </ul>
  </div>
  <div class="feed-footer seed-flexbox">
    <span class="viewed seed-flexbox seed-flexbox-align-center">{{feed.commentCount }}</span>
    <span class="thumbs-up seed-flexbox seed-flexbox-align-center" [class.thumbs-uped]="feed.isDigg">{{feed.diggCount }}</span>
  </div>
</div>
